page-profile-three {
  @font-face {
    font-family: "ProximaNova-Regular";
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/ProximaNova-Regular.eot");
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/ProximaNova-Regular.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/ProximaNova-Regular.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/ProximaNova-Regular.svg#rocketdesign-font") format("svg");
    font-weight: normal;
    font-style: normal;
  }
  $gradient: #F96B4C,
  #F23182;
  $radius: 10px;
  $visual-height: 68%;
  $datas-height: calc(100% - #{$visual-height}+2px);
   :root {
    font-size: 16px;
  }
  * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    float: left;
  }
  body {
    background: #F0EFED;
    background-image: linear-gradient(to bottom, #E5E4E5, #C2C1C2);
    font-family: 'ProximaNova-Regular', Helvetica neue, sans-serif;
  }
  #posts {
    margin-top: 20vh;
  }
  .container {
    width: 100%;
    height: 100%;
    position: relative;
    margin: auto;
  }
  .card-profile {
    float: left;
    position: absolute;
    width: 100%;
    height: 80vh;
    background: #fff;
    z-index: 1;
    box-shadow: 0 0 5px rgba(black, 0.1);
    &_visual {
      height: $visual-height;
      overflow: hidden;
      position: relative;
      background: linear-gradient(to bottom, darken(#545559, 10%), saturate(darken(#3A4A7B, 2%), 20%), saturate(darken(#3A4A7B, 15%), 20%));
      &:before,
      &:after {
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        background: url(../assets/imgs/avatar/cosima-avatar.jpg)no-repeat center center/cover;
        opacity: 0.5;
        mix-blend-mode: lighten;
      }
      &:before {
        filter: grayscale(100%);
      }
      &:after {
        z-index: 2;
        mix-blend-mode: lighten;
        background: url();
        opacity: 1;
      }
    }
    &_user-infos {
      position: absolute;
      z-index: 3;
      left: 0;
      right: 0;
      margin: auto;
      top: calc(#{$visual-height} - 100px);
      color: #fff;
      text-align: center;
      a {
        width: 64px;
        height: 64px;
        position: absolute;
        left: 0;
        right: 0;
        background: {
          color: #F96B4C;
          image: linear-gradient($gradient);
        }
        display: block;
        clear: both;
        margin: auto;
        border-radius: 100%;
        top: calc(500% + 66px);
        box-shadow: 0 2px 0 #D42D78,
        0 3px 10px rgba(#F33180,
        0.15),
        0 0px 10px rgba(#F33180,
        0.15),
        0 0px 4px rgba(darken(#F33180,
        80%),
        0.35),
        0 5px 20px rgba(#F33180,
        0.25),
        0 15px 40px rgba(#F33180,
        0.75),
        inset 0 0 15px rgba(#FFFFFF,
        0.05);
        overflow: hidden;
        &:after {
          content: '';
          font-style: normal;
          position: absolute;
          width: 100%;
          height: 100%;
          display: block;
          background: {
            image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/icon-add-f.svg");
            repeat: no-repeat;
            size: 30%;
            position: center center;
          }
          left: 0;
          top: 0;
        }
      }
      .infos_name,
      .infos_nick {
        display: block;
        clear: both;
        padding: .5em 0;
        padding-top: 0;
        position: absolute;
        width: 100%;
        text-align: center;
        font-size: 18px;
        top: 8px;
        font-weight: 800;
      }
      .infos_nick {
        top: 32px;
        font-size: 14px;
        font-weight: 300;
      }
    }
    &_user-stats {
      background: #fff;
      float: left;
      width: 100%;
      height: $datas-height;
      border-bottom-left-radius: $radius;
      border-bottom-right-radius: $radius;
      .stats-holder {
        position: relative;
        margin-top: 2.8em;
        width: 100%;
        display: flex;
      }
      .user-stats {
        flex: 1;
        text-align: center;
        strong {
          display: block;
          float: left;
          clear: both;
          width: 100%;
          color: #B3B1B2;
          font-size: 14px;
          font-weight: 500;
          letter-spacing: -0.2px;
        }
        span {
          font-size: 26px;
          color: #5E5E5E;
          padding: .18em 0;
          display: inline-block;
        }
      }
    }
  }
}
